<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <title></title>
    <link href="css/lanai-ui.css" rel="stylesheet" />
</head>
<body class="login-page">
    <section class="content">
        <div class="login-box">            
            <div class="login-box-body">
            	<div class="login-logo">
	                <a href="index.html"><b>CMS</b>-System</a>
	            </div>
	            <hr>
	            <div id="message" style="display: none;"><p id="messageText" class="login-box-msg"></p></div>
                

                <form method="post">
                    <div class="form-group has-feedback">
                        <input type="text" id="username" class="form-control" placeholder="用户名" value="admin">
                        <span class="fa fa-envelope form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" id="pwd" class="form-control" placeholder="密码" value="123456">
                        <span class="fa fa-lock form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input style="width: 50%" type="text" id="code"  placeholder="验证码">
                        <img alt="" src="/sys/getGifCode" id="getYzm" onclick="changeCode()">
                    </div>
                    
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="checkbox checkbox-primary">
		                        <input id="checkbox1" type="checkbox" checked="">
		                        <label for="checkbox1" style="display: none;">
		                            	记住密码
		                        </label>
		                    </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-xs-4">
                            <button type="button" onclick="login()" class="btn btn-primary btn-block btn-flat">登 录</button>
                        </div>
                        <!-- /.col -->
                    </div>
                </form>
 
            </div>
            <!-- /.login-box-body -->
        </div>

    </section>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/lanai-ui.js"></script>
    <script type="text/javascript">
    
   　$(document).keydown(function(event){
		if(event.keyCode == 13){
			login(); 
		}
	});
    	function login(){
    		var username = $("#username").val();
    		var pwd = $("#pwd").val();
    		var code = $("#code").val();
    		if(!username || !pwd){
    			$("#message").show();
        		$("#messageText").html("<font color='red'>用户名或密码不能为空</font>");
    			return;
    		}
    		$("#message").hide();
    		$.ajax({
    			type:"POST",
    			url:"/sys/login",
    			data:{"username":username,"password":pwd,"code":code},
    			success:function(ret){
    				if(ret.code==0){
    					//alert(ret.username);
    					var storage=window.localStorage;
    					storage.setItem("auth",ret.auth);
    					//console.log(ret.auth);
    					$.cookie("username",ret.username);
    					window.location.href="index.html";
    				}else{
    					$("#message").show();
        	    		$("#messageText").html('<font color="red">'+ret.msg+'</font>');
    				}    				
    			}
    		});
    	}
    </script>
    <script type="text/javascript">
	    //验证码
	    /* $("#getYzm").click(function(){
	    	var url = "/sys/getGifCode?t=" + Math.random();
	    	this.src = url;
	    }).show(); */
	    
	    /*
	   	  未修改的自动初始化点击一次
	    $("#getYzm").click(function(){
	    	var url = "/sys/getGifCode?t=" + Math.random();
	    	this.src = url;
	    }).click().show();
	    */
	    function changeCode(){
	    	var url = "/sys/getGifCode?t=" + Math.random();
	    	this.src = url;
	    	$("#getYzm").attr('src',url);
	    }  
	    
    </script>
</body>
</html>
